<template>
    <div class="user-header">
        <el-button type="primary" @click="handleAdd">+新增</el-button>
        <el-form :inline="true" :model="formInline">
            <el-form-item label="请输入:">
            <el-input v-model="formInline.keyword" placeholder="请输入用户名" />
            </el-form-item>
            
            <el-form-item>
            <el-button type="primary" @click="handleSerch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table">
        <el-table :data="list" style="width: 100%" height="700">
        <el-table-column 
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width?item.width:125"
        />
        
        <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
            >
            <el-button type="danger" size="small" @click="handleDelete(scope.row)"
            >删除
            </el-button>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="config.total"
    @current-change="changePage"
    class="pager mt-4"
  />
    </div>
    <el-dialog
        v-model="dialogVisible"
        :title="(action=='add')?'新增用户':'编辑用户'"
        width="35%"
        :before-close="handleClose"
        >
        <el-form :inline="true" :model="formUser" ref="userForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名：" prop="name" 
                    :rules="[{required:true,message:'请填写姓名！'}]"
                    >
                    <el-input v-model="formUser.name" placeholder="请输入姓名" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄：" prop="age"
                    :rules="[{required:true,message:'请填写年龄！'},
                            {type:'number',message:'年龄必须是数字！'}]"
                    >
                    <el-input v-model.number="formUser.age" placeholder="请输入年龄" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别：" prop="sex"
                    :rules="[{required:true,message:'请填写性别！'}]"
                    >
                        <el-select
                            v-model="formUser.sex"
                            placeholder="请选择"
                            clearable
                            >
                            <el-option label="男" value="0" />
                            <el-option label="女" value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期：" prop="birth"
                    :rules="[{required:true,message:'请填写出生日期！'}]"
                    >
                        <el-date-picker
                            v-model="formUser.birth"
                            type="date"
                            label="出生日期"
                            placeholder="请输入"
                            style="width: 100%;"
                            clearable
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 这里可加<el-row></el-row>来加更多数据 -->
            <el-row>
                <el-form-item label="地址：" prop="addr"
                :rules="[{required:true,message:'请填写地址！'}]"
                >
                <el-input v-model="formUser.addr" placeholder="请输入地址" clearable />
                </el-form-item>
            </el-row>
            <el-row style="justify-content: flex-end;">
                <el-form-item>
                <el-button type="primary" @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="onSubmint">确定</el-button>
                </el-form-item>
            </el-row>
            
        </el-form>
        <!-- <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
            确定
            </el-button>
        </span>
        </template> -->
  </el-dialog>

</template>

<script>
import { getCurrentInstance, onMounted,defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
        const{proxy}=getCurrentInstance();
        const list=ref([]);
        const tableLabel = reactive([
            {
                prop: "name",
                label: "姓名",
            },
            {
                prop: "age",
                label: "年龄",
            },
            {
                prop: "sexLabel",
                label: "性别",
            },
            {
                prop: "birth",
                label: "出生日期",
                width: 200,
            },
            {
                prop: "addr",
                label: "地址",
                width: 320,
            },
            ]);
        onMounted(()=>{
            getUserData(config);
        });
        const config =reactive({
            total:0,
            package:1,
            name:'',
        });
        const getUserData=async (config)=>{
            let res=await proxy.$api.getUserData(config);
            // console.log(res);
            config.total =res.count;
            list.value=res.list.map((item)=>{
                item.sexLabel=item.sex===0?'女':'男'
                return item
            })
        };
        const changePage=(page)=>{
            config.page=page;
            getUserData(config);
        };
        const formInline=reactive({
            keyword:"",
        });
        const handleSerch=()=>{
            config.name=formInline.keyword;
            getUserData(config);
        };
        //控制模态框的显示隐藏
        const dialogVisible=ref(false);
        const handleClose = (done) => {
        ElMessageBox.confirm('确定关闭吗?')
            .then(() => {
                proxy.$refs.userForm.resetFields();
                done();
            })
            .catch(() => {
            // catch error
            })
        };
        //添加用户的form数据
        const formUser = reactive({
            name:"",//添加用户名
            age:"",
            sex:"",
            birth:"",
            addr:"",
        });
        const timeFormat=(time)=>{
            var time=new Date(time);
            var year=time.getFullYear();
            var month=time.getMonth()+1;
            var date=time.getDate();
            function add(m){
                return m<10?"0"+m:m;
            }
            return year+'-'+add(month)+'-'+add(date);
        }
        //添加用户
        const onSubmint=()=>{
            proxy.$refs.userForm.validate(async (valid)=>{
                if(valid){
                    if(action.value=='add'){
                        formUser.birth=timeFormat(formUser.birth);
                        let res=await proxy.$api.addUser(formUser);
                        console.log(res);
                        if(res){
                            dialogVisible.value = false
                            proxy.$refs.userForm.resetFields();
                            getUserData(config);
                        }
                    }else{
                        //编辑接口
                        console.log(formUser);
                        formUser.sex=='男'?(formUser.sex=1):(formUser.sex=0);
                        let res=await proxy.$api.editUser(formUser);
                        if(res){
                            dialogVisible.value = false;
                            proxy.$refs.userForm.resetFields();
                            getUserData(config);
                        }
                    }
                }else{
                    ElMessage({
                        showClose:true,
                        message:'请输入正确的内容',
                        type:'error'
                    });
                }
            })
            
        };
        //取消添加用户
        const handleCancel=()=>{
            dialogVisible.value = false
            proxy.$refs.userForm.resetFields();
        };
        //区分编辑和新增
        const action=ref('add');
        //编辑用户
        const handleEdit=(row)=>{
            //浅拷贝
            action.value='edit'
            dialogVisible.value=true
            row.sex==1?(row.sex='男'):(row.sex='女');
            proxy.$nextTick(()=>{
                Object.assign(formUser,row);
            })
            
        };
        //新增用户
        const handleAdd=()=>{
            action.value='add'
            dialogVisible.value=true
        };
        //删除用户
        const handleDelete=(row)=>{
            ElMessageBox.confirm('你确定删除吗?')
            .then(async() => {
                 await proxy.$api.deleteUser({
                    id:row.id
                 });
                 ElMessage({
                    showClose:true,
                    message:'删除成功',
                    type:'success',
                 });
                 getUserData(config);
            })
            .catch(() => {
            // catch error
            })
        }
        return{
            list,
            tableLabel,
            config,
            changePage,
            formInline,
            handleSerch,
            dialogVisible,
            handleClose,
            formUser,
            onSubmint,
            handleCancel,
            action,
            handleEdit,
            handleAdd,
            handleDelete,
        }
    },
})
</script>

<style lang="less" scoped>
.table{
    position: relative;
    height: 720px;
    .pager{
        position: absolute;
        right: 0;
        bottom: -20px;
    }
}
.user-header{
    display: flex;
    justify-content: space-between;
}
</style>